<template>
	

	<view class="doCard">
	<!-- 	<view class="title">
			{{nowDone ? '今日已完成' : '今日未完成'}}
		</view> -->
		<text class="top-day">距25考研还有{{day}}天</text>
		<view class="code">
			<!-- <view class="code-img">
				<image src="https://pic.imgdb.cn/item/65d32edf9f345e8d03c7828d.jpg" mode=""></image>
			</view> -->
			<view class="text">
				{{userInfo.userName}}在 <text style="color: #3a2e27;font-weight: 700;font-size: 36rpx;">卓飞刷题</text> 小程序 <br />刷考研政治题,限时免费激活
			</view>
		</view>
		<view class="card-img">
			<image src="https://pic.imgdb.cn/item/65d32cf49f345e8d03c1dd00.png" mode=""></image>
		</view>
		<view class="body">
			<view class="item">
				<view class="num">
					{{userInfo.day  ? userInfo.day : 0}}
				</view>
				<view class="text">
					累计天数
				</view>
			</view>
			<view class="item">
				<view class="num">
					{{userInfo.done ? userInfo.done : 0}}
				</view>
				<view class="text">
					累计道数
				</view>
			</view>
			<view class="item">
				<view class="num">
					{{nowDone}}
				</view>
				<view class="text">
					今日道数
				</view>
			</view>
		</view>
		<view class="card">
			<uni-calendar date="" :lunar="false" :showMonth="false" :selected="selected" />

		</view>
		<!-- <view class="bottom">
			<view class="bottom-title">
				分享到
			</view>
			<view class="bottom-body">
				<view class="vxfriend" @click="canvasToImage.getImage">
					<view class="img">
						<image src="https://pic.imgdb.cn/item/65d340de9f345e8d030310e7.png" mode=""></image>
					</view>
					<view class="">
						好友
					</view>
				</view>
				<view class="vxpyq">
					<view class="img">
						<image src="https://pic.imgdb.cn/item/65d344f79f345e8d0312e5e6.png" mode=""></image>
					</view>
					<view class="">
						朋友圈
					</view>
				</view>
				<view class="save">
					<view class="img">
						<image src="https://pic.imgdb.cn/item/65d341269f345e8d03040d0f.png" mode=""></image>
					</view>
					<view class="">
						保存
					</view>
				</view>
			</view>

		</view> -->
		<view class="activity">
			<button class="my-button" size="default"  plain="true" @click="goScreenshotRecord">上传群截图</button>
			
			<text style="color: #e06c61;">参与打卡活动，领现金</text><br />
			<view class="activity-item">
				1.VIP2(付费激活)联系QQ群管理员<text style="color: #e06c61;">领取超级考研优惠价29.7的政治英语数学带背答疑班</text><br />
			</view>
			<view class="activity-item">
				2.VIP1(免费激活)和VIP2(付费激活)累计10天把打卡截图发至3个300人以上的考研qq群或者微信群，提交3张群聊截图待管理员审批，联系QQ群管理员<text style="color: #e06c61;">奖励现金10元</text><br />
			</view>
			<view class="activity-item">
				3.VIP2，累计30天把打卡截图发至3个300人以上的考研qq群或者微信群，提交3张群聊截图待管理员审批，联系QQ群管理员<text style="color: #e06c61;">再奖励现金20元</text><br />
			</view>
		
			<view class="activity-item">
				4.VIP2，累计100天把打卡截图发至3个300人以上的考研qq群或者微信群，提交3张群聊截图待管理员审批并25考研政治分数80+ 联系QQ群管理员<text
				style="color: #e06c61;">送200元现金</text>
			</view>
			
		</view>
		<!-- <view class="dayQuestion">
			<button class="my-button" size="default"  plain="true" @click="goScreenshotRecord">上传群截图</button>
			<view class="title">
				每日一题
			</view>
			<view class="examQuestion">
				{{'【' + (questionData.question.type == 1 ? '单选' : '多选') + '】' + questionData.question.examQuestion}} 
			</view>
			<view class="options">
				<view class="item" v-for="(item,index) in questionData.question.options" :key="index">
					{{item.select_id + ' '  +  item.select}}
				</view>
			</view>
			<view class="correct">
				正确答案：<text v-for="(itema,indexa) in questionData.question.correct_id" :key="index">{{itema}}</text>
			</view>
			<view class="analyse">
				{{questionData.question.analyse}}
			</view>
			<view class="from">
				出自： {{questionData.teacher + '的' + questionData.series + questionData.section + questionData.chapter + '第' + questionData.question.num + '题'}}
			</view>
		</view> -->
		<uni-popup ref="realNamePopup" class="me-popup" background-color="#fff" @change="change">
			<view class="popup-content">
				<view class="">
					登记真实姓名是用来核实该用户的真实考研成绩，无其他商业用途，登记后将无法更改
				</view>
				<input class="uni-input" focus placeholder="请输入真实姓名" v-model="realName" />
				<view @click="updateButton" class="acButton">确认</view>
			</view>
		
		</uni-popup>
	</view>
</template>
<script setup>
	import {
		ref,
	} from 'vue'
	import { onLoad,onShow} from "@dcloudio/uni-app" 
	import moment from 'moment'
	import util from '../../util/index.js'
	const userInfo = ref({})
	const selected = ref([])
	const nowDone= ref(0)
	const realNamePopup = ref()
	const realName = ref("")
	const questionData= ref({
		chapter:"",
		question:{},
		section:"",
		series:"",
		teacher:""
	})
	const day = ref(0)
	// onLoad(() => {
	// 	getDayQuestion()
	// })
	
	const getDayQuestion = () => {
		uni.request({
			url:util.baseUrl + '/wxapi/wxQuestion/dayQuestion',
			success:(res) => {
				console.log('res',res)
				if(res.data.code == 200) {
					questionData.value = res.data.data
				}
			}
		})
	} 
	onShow(() => {
	const date1 = moment('2024-12-21')
	const date2 = moment(new Date())
	day.value = date1.diff(date2,"days")
		let userInfo = uni.getStorageSync('userInfo')
		let nowRecord = uni.getStorageSync('nowRecord')
		
		console.log('nowRecord',nowRecord)
		getUserInfo(userInfo.openid)
		let dateArr = []
		// 修改数据结构 并把今日去除
		const newDate = moment(new Date()).format("YYYY-MM-DD");
		if(nowRecord.date != newDate) {
			nowRecord = {
				date: newDate,
				done:0
			}
					
			uni.setStorageSync('nowRecord',nowRecord)
		}
		nowDone.value = nowRecord.done
		userInfo.clockIn.forEach((item) => {
			const obj = {
				'date':item
			}
			if(item != newDate) {
				dateArr.push(obj)
			}
			
		})
		console.log('dateArr',dateArr)
		selected.value = dateArr
		 
	})
	const goScreenshotRecord = () => {
		console.log('userInfo.value.realName',userInfo.value.realName)
		if(nowDone.value < 1) {
			uni.showToast({
				title: '今天答题需完成1道',
				icon:'none',
				duration: 1000
			})
			return
		}
		// if(userInfo.value.vip != 2) {
		// 	uni.showModal({
		// 		title: '提示',
		// 		content: '您还不是VIP2用户，请先付费激活',
		// 		success: function(res) {
		// 			if (res.confirm) {
		// 				uni.navigateTo({
		// 					url: '/pages/buy/buy'
		// 				})
		// 			} else if (res.cancel) {
		// 				console.log('用户点击取消');
		// 			}
		// 		}
		// 	});
		// 	return
		// }
		
		// vip1可以进去  vip2有真实姓名的可以进
		if((userInfo.value.realName && userInfo.value.vip == 2) || userInfo.value.vip == 1) {
			uni.navigateTo({
				url:'/pages/screenshotRecord/screenshotRecord'
			})
		}else if(!userInfo.value.realName && userInfo.value.vip == 2){
			
		// vip2没有 真实姓名 提示输入
			realNamePopup.value.open()
		}else {  // 其他情况 就是普通用户
				uni.showModal({
					title: '提示',
					content: '您还不是VIP用户，请先激活',
					success: function(res) {
						if (res.confirm) {
							uni.navigateTo({
								url: '/pages/buy/buy'
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
		}
		
		
	}
	const getUserInfo = (openid) => {
		uni.request({
			url:util.baseUrl + '/wxapi/user/getUserInfo',
			method:'GET',
			data:{
				openid,
			},
			success:(res) => {
				if( res.data.data) {
					userInfo.value = res.data.data
					uni.setStorageSync('userInfo', res.data.data);
				}
				
			}
		})
		
	}
	const updateButton = () => {
		let tempRealName = realName.value.trim()
		if(tempRealName) {
			uni.request({
				url:util.baseUrl + '/wxapi/user/updateUserRealName',
				method:'POST',
				data:{
					id:userInfo.value._id,
					realName:tempRealName
				},
				success:(res) => {
					if(res.data.code == 200) {
						uni.showToast({
							title: '成功',
							icon:'success',
							duration: 1000
						})
						realNamePopup.value.close()
						uni.navigateTo({
							url:'/pages/screenshotRecord/screenshotRecord'
						})
						return
					}
					
					
				}
			})
		}
		
	}
</script>




<style lang="scss">
	.uni-popup__wrapper{
		border-radius: 20rpx;
	}
	.doCard {
		position: relative;
		padding: 50rpx;
		padding-top: 20rpx;
		min-height: 100vh;
		background-color: #fff;
		.top-day {
			font-weight: 700;
			font-size: 40rpx;
				margin-left: 15rpx;
			}
		.popup-content {
			padding: 50rpx;
			width: 500rpx;
			height: 310rpx;
			border-radius: 10rpx;
		
			.uni-input {
				background-color: #fcf3ca;
				padding: 10rpx 20rpx;
				margin: 20rpx 0;
				border-radius: 10rpx;
			}
		
			.img {
				width: 150rpx;
				height: 150rpx;
				margin: 0 auto;
				margin-bottom: 20rpx;
		
				image {
					width: 100%;
					height: 100%;
				}
			}
		
			.acButton {
				width: 300rpx;
				height: 80rpx;
				line-height: 80rpx;
				background-color: #ffc637;
				font-size: 36rpx;
				font-weight: 700;
				color: #3a2e27;
				text-align: center;
				border-radius: 40rpx;
				margin: 0 auto;
			}
		}
		.dayQuestion {
			position: relative;
			font-size: 28rpx;
			color: #9f9f9f;
			.title {
				margin: 20rpx 0;
				color: #000;
				font-size: 32rpx;
			}
			.correct {
				margin: 10rpx 0;
			}
			.examQuestion {
				margin-bottom: 10rpx;
			}
			button{
				position: absolute;
				top: -5rpx;
				right: 0;
				background: linear-gradient(to left, #fdd21f, #ffe537);
				height: 60rpx;
				border-top-left-radius: 40rpx;
				border-bottom-left-radius: 40rpx;
				
				font-weight: 700;
				width: 320rpx;
				
				line-height: 60rpx;
				text-align: center;
			}
		}
		.activity {
			margin-top: 60rpx;
			font-size: 28rpx;
			color: #9f9f9f;
			position: relative;
			.activity-item {
				margin-bottom: 12rpx;
			}
			button{
				position: absolute;
				top: -40rpx;
				right: 0;
				background: linear-gradient(to left, #fdd21f, #ffe537);
				height: 60rpx;
				border-top-left-radius: 40rpx;
				border-bottom-left-radius: 40rpx;
				
				font-weight: 700;
				width: 320rpx;
				
				line-height: 60rpx;
				text-align: center;
			}
		}
		.code {
			// margin-top: 20rpx;
			display: flex;

			.code-img {

				width: 100rpx;
				height: 100rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.text {
				margin-top: 4rpx;
				margin-left: 20rpx;
				font-size: 28rpx;
				color: #9f9f9f;
			}
		}

		.title {
			font-size: 40rpx;
			font-weight: 700;
		}

		.body {
			display: flex;
			margin: 20rpx 0;
			justify-content: space-between;

			.num {
				font-size: 40rpx;
				font-weight: 700;
				text-align: center;
			}

			.text {
				font-size: 30rpx;
				color: #9f9f9f;
			}
		}

		.bottom {

			margin-top: 50rpx;
			height: 200rpx;
			width: 100%;
			font-size: 30rpx;
			color: #9f9f9f;
			text-align: center;

			.bottom-body {
				margin-top: 50rpx;
				display: flex;
				justify-content: space-between;

				.img {
					width: 100rpx;
					height: 100rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

			}

		}

		.card-img {
			position: absolute;
			right: 50rpx;
			top: 30rpx;
			height: 100rpx;
			width: 100rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.card {
			padding: 0 0;
			box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.08);
		}

		::v-deep .uni-calendar-item__weeks-box-circle {
			width: 60rpx !important;
			height: 60rpx !important;
			top: 8rpx;
			right: 8rpx;
			background-color: #fcd22e !important;
			border-radius: 50% !important;
			opacity: 0.8;
		}

		::v-deep .uni-calendar-item__weeks-box-text {
			color: #000000 !important;
		}

		::v-deep .uni-calendar-item__weeks-box-item {
			width: 72rpx !important;
			height: 72rpx !important;
		}

		::v-deep .uni-calendar-item--isDay {
			background-color: #fcd22e;
			border-radius: 50%;
		}

	}
</style>